<template>
  <div class="login-wrap">
    <div class="login-bd">
      <div class="login-hd">
        <h1>后台管理系统登录</h1>
      </div>
      <form @submit.prevent="submit">
        <div class="user">
          <input type="text" id="username" name="admin_account" placeholder="请输入用户名" required="required" class="input-control" v-model="admin_name">
        </div>
        <div class="pwd">
          <input type="password" id="password" name="admin_password" placeholder="请输入密码" required="required" class="input-control" pattern="\w{6,16}" title="密码为6~16位字母、数字或下划线" v-model="admin_pwd">
        </div>
        <div class="error-tip" v-if="loginError">{{ loginMsg }}</div>
        <div class="submit-btn">
          <input type="submit" value="登录" class="btn" name="submit">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "adminLogin",
  data () {
    return{
      admin_name:'',//登录名
      admin_pwd:'',//登录密码
      loginError:false,
      loginMsg:''
    }
  },
  methods: {
    //登录请求
    submit () {
      this.$axios.post('/admin/dologin',{
        admin_account:this.admin_name,
        admin_password:this.admin_pwd
      }).then(reponse=>{
        let res = reponse.data;
        if(res.state===200){
          //设置状态管理的user
          this.$store.dispatch('setStateUser',res.extra.token);
          //获取状态管理user
          let adminToken = this.$store.getters.getState.user;
          //设置Cookies
          this.setCookie({'username':this.admin_name,'adminToken':adminToken});
          //登录成功后通过编程式路由跳转
          this.$router.push('/admin');
        }
        else{
          this.loginMsg=res.msg;
          this.loginError=true;
        }
      }).catch(error=>{
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  @import "../../static/css/adminLogin.css";
</style>
